<template>
  <v-card class="mx-auto">
    <v-card-title>
      <span class=" font-weight-light">热门杂谈</span>
    </v-card-title>

    <v-container
      class="pa-0"
      v-for="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
      :key="i"
    >
      <v-list-item active-class="">
        <v-list-item-avatar color="">
          <v-img 
            alt=""
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1727827202,452941892&fm=26&gp=0.jpg"
          ></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>Evan You</v-list-item-title>
          <v-list-item-subtitle>12/08 15:47</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-list-item-content class="pa-0">
        <v-card-text class="pt-0 pb-0 black--text">
          Turns out semicolon-less style is easier and safer in TS because most
        </v-card-text>
        <v-list-item v-viewer="{fullscreen: false,keyboard:false,title:false,movable: false,navbar: true,zoomable: false,scalable: false,rotatable: false}" class="pt-0 pb-0 d-flex ">
            <img  src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4263183788,559669544&fm=26&gp=0.jpg"   height="100" width="100" />

            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607685415093&di=c052d0f20775cedabdb3aa8d48425b74&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F16%2F20180716214002_yymcW.jpeg"    height="100"  width="100" />
        </v-list-item>

      </v-list-item-content>

      <v-card-actions class="pt-0 pb-0 text-caption">
        <v-list-item>
          <v-row align="center" justify="start">
            <v-btn small icon color="" class="">
              <v-icon small>
                mdi-heart-outline
              </v-icon>
            </v-btn>
            <span class="subheading ">10 赞</span>

            <v-btn small icon color="" class="">
              <v-icon small>
                mdi-monitor-share
              </v-icon>
            </v-btn>
            <span class="subheading ">0 转发</span>

            <v-btn small icon color="" class="">
              <v-icon small>
                mdi-comment-outline
              </v-icon>
            </v-btn>
            <span class="subheading ">31 评论</span>
          </v-row>
        </v-list-item>
      </v-card-actions>

      <v-divider class="item_divider"></v-divider>
    </v-container>
  </v-card>
</template>

<script>
export default {
};
</script>

<style scoped>
.item_divider {
  border-color: #f4f4f4;
}
</style>
